<script setup lang="ts">

    import { ref } from 'vue';
    import { useChatStore } from '@/stores/chat';

    import ChatPanel from '@/components/ChatBox/Panel/index.vue';
    import ChatContent from '@/components/ChatBox/Content/index.vue';

    const popoverRef = ref();
    const chatStore = useChatStore();

    // 关闭Popover弹出框
    const close = () => {
        chatStore.isShowChatBox = false;
    }

</script>
<template>
    <el-popover 
        placement="bottom" 
        :visible="chatStore.isShowChatBox"
        :width="790"
        :show-arrow="false"
        :teleported="false"
        ref="popoverRef"
    >
        <div class="chat_box">
            <div class="box_left">
                <!-- 聊天面板 -->
                <chat-panel ref="chatPanelRef" />
            </div>
            <div class="box_right">
                <!-- 聊天框 -->
                <chat-content ref="chatContentRef" title="回忆里依稀" @close="close" />
            </div>
        </div>
        <template #reference>
            <slot></slot>
        </template>
    </el-popover>
</template>
<style lang="less" scoped>
    .chat_box {
        width: 790px;
        height: 625px;
        display: flex;
        background: #fff;
        border: 0;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(24, 24, 24, 0.1);
        & .box_left {
            min-width: 250px;
            border-right: 1px solid rgba(22, 24, 35, .06);
        }
        & .box_right {
            min-height: 536px;
            max-height: 700px;
            width: 100%;
            overflow: hidden;
        }
    }
</style>